<script setup lang="ts">
import { componentRoutes } from "@/router/component";
import ViMenu from "@/vivid-ui/components/ViMenu.vue";
import ViMenuItem from "@/vivid-ui/components/ViMenuItem.vue";
const visiableRoutes = componentRoutes.filter((i) => i.meta.inMenu)
defineEmits(['update:route'])
</script>

<template>
  <div class="menu-container">
    <vi-menu mode="vertical">
      <vi-menu-item v-for="(route, index) in visiableRoutes" :index="index" :key="route.name"
        @click="$emit('update:route', route.name)">
        {{ route.meta.title ?? route.name }}
      </vi-menu-item>
    </vi-menu>
  </div>

</template>

<style scoped lang="scss">
.menu-item {

  &:hover {
    box-shadow: .0625rem;
  }
}

.menu-container {
  height: 90vh;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
